<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import Cookies from 'js-cookie'

const router = useRouter()
const userStore = useUserStore()

const handleMenuItemClick = (index: string) => {
  switch (index) {
    case 'home':
      router.push('/home')
      break
    case 'cart': // 购物车按钮
      // 判断是否有token来决定跳转路径
      if (Cookies.get('user_token')) {
        router.push('/user-cart')
      } else {
        router.push('/user-login')
      }
      break
    case 'me':
      if (Cookies.get('user_token')) {
        router.push('/user-order')
      } else {
        router.push('/user-login')
      }
      break
  }
}
</script>

<template>
  <div class="page-wrap">
    <!-- 页面主体内容 -->
    <main class="main-wrap">
      <slot></slot>
    </main>
    <!-- 底部等距菜单 -->
    <footer class="footer-wrap">
      <el-menu
        mode="horizontal"
        :ellipsis="false"
        class="bottom-menu"
        active-text-color="#409EFF"
        background-color="#ffffff"
        text-color="#303133"
        @select="handleMenuItemClick"
      >
        <el-menu-item index="home">
          <span>首页</span>
        </el-menu-item>

        <el-menu-item index="cart">
          <span>购物车</span>
        </el-menu-item>

        <el-menu-item index="me">
          <span>我的</span>
        </el-menu-item>
      </el-menu>
    </footer>
  </div>
</template>

<style scoped>
/* 去掉浏览器默认 margin/padding */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 关键点：用 100vh 而不是 min-height */
}

/* 2. 主体可滚动 */
.main-wrap {
  flex: 1 1 0; /* 占据剩余空间 */
  overflow-y: auto; /* 出现滚动条 */
  padding-bottom: 50px;
}
/* 3. 底部固定：position + flex 等分 */
.footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  border-top: 1px solid #dcdfe6;
  z-index: 1000;
}

.bottom-menu {
  display: flex;
  height: 100%;
}
.bottom-menu .el-menu-item {
  flex: 1;
  justify-content: center;
  align-items: center;
}
</style>
